var c = document.getElementById('c'),
    ctx =  c.getContext('2d'),
    points = 40, angle = 360 / points, arc = Math.PI * 2 / points,
    outerRadius = 200, innerRadius = 150,
    grad;
c.width = window.innerWidth * window.devicePixelRatio;
c.height = window.innerHeight * window.devicePixelRatio;
var mx = c.width / 2, my = c.height / 2;

function spectrum() {
    for(var i = 1; i <= points; i += 1) {
        var a = i * angle;
        var b = (i - 1) * angle;

        var radius = innerRadius + (outerRadius - innerRadius) / 2;
        var x1 = Math.cos(toRadians(a)) * radius + mx;
        var y1 = Math.sin(toRadians(a)) * radius + my;
        var x2 = Math.cos(toRadians(b)) * radius + mx;
        var y2 = Math.sin(toRadians(b)) * radius + my;

        var g = ctx.createLinearGradient(x1, y1, x2, y2);
        g.addColorStop(0, `hsl(${a}, 100%, 50%)`);
        g.addColorStop(1, `hsl(${b}, 100%, 50%)`);

        var o = 0.003;
        ctx.beginPath();
        ctx.moveTo(mx, my);
        ctx.arc(mx, my, outerRadius, toRadians(b) - o, toRadians(a) + o, false);
        ctx.fillStyle = g;
        ctx.closePath();
        ctx.fill();
    }
    // ctx.beginPath();
    // ctx.fillStyle = 'gray';
    // ctx.arc(mx, my, innerRadius, 0, 360 * Math.PI / 180, true);
    // ctx.closePath();
    // ctx.fill();
}

function toRadians(a) {
    return a * Math.PI / 180;
}

spectrum();